<template>
  <div class="service">
    <!-- header -->
    <van-nav-bar
      title="在线客服"
      left-text="返回"
      class="service-nav"
      ref="header"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- content -->
    <van-cell center title="您好！如有任何疑问，请扫描二维码联系客服！（QQ：498992321）" />
    <van-image
      width="300px"
      height="300px"
      fit="contain"
      :src="service"
    />
  </div>
</template>

<script>
export default {
  name: "Service",
  data() {
    return {
      service: require('./../../assets/img/service.jpg')
    };
  },
    mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require('statusBar');
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret){
        _this.$refs.header.$el.style.height = (ret.statusHeight + 44) + 'px';
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + 'px';
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__left"
        )[0].style.top = ret.statusHeight + "px";
      });
    });
  },
  methods: {
    // 返回
    onClickLeft() {
      window.api.closeWin();
    }
  }
};
</script>

<style lang="scss">
.service {
  width: 100%;
  @include flex(
    $direction: column,
    $justifyContent: flex-start,
    $flexWrap: nowrap
  );
  .van-cell {
    margin-bottom: 30px;
  }
}
</style>
